<template>
  <div>
    <div class="chart" ref="myChart"></div>
    <div class="chart2" ref="myChart2"></div>
    <div class="chart3" ref="myChart3"></div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      chart2_data: [
        {
          name: 'A部门',
          value: 30
        },
        {
          name: 'B部门',
          value: 25
        },
        {
          name: 'C部门',
          value: 46
        },
        {
          name: 'D部门',
          value: 20
        }, {
          name: 'E部门',
          value: 30
        }
      ],
      chart3_data: [{name: 'xx', coords: 32}, {name: 'yy', coords: 24}]
    }
  },
  methods: {
    init () {
      const getChartDom = this.$refs.myChart
      const myChart = this.echarts.init(getChartDom, 'dark')
      window.onresize = myChart.resize
      myChart.setOption({
        title: {
          text: '月度风险状况'
        },
        tooltip: {},
        legend: {
          type: 'plain',
          right: '20px'
        },
        xAxis: {
          name: '月份',
          data: this.data
        },
        yAxis: {
          name: '风险数'
        },
        series: [{
          name: '销量123',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }, {
          name: '学习型',
          type: 'bar',
          data: [10, 32, 34, 54, 10, 32]
        }]
      });
    },
    init2 () {
      const getChartDom = this.$refs.myChart2
      const myChart = this.echarts.init(getChartDom, 'dark')
      window.onresize = myChart.resize;
      myChart.setOption({
        title: {
          text: '月度风险状况'
        },
        tooltip: {},
        legend: {
          type: 'plain',
          right: '20px'
        },
        axisPointer: {
          type: 'shadow'
        },
        series: [{
          name: '学习型',
          type: 'pie',
          radius: ['50%', '70%'],
          data: this.chart2_data
        }]
      });
    },
    init3 () {
      const getChartDom = this.$refs.myChart3
      const myChart = this.echarts.init(getChartDom, 'dark')
      myChart.setOption({
        title: {
          text: '月度风险状况'
        },
        xAxis: {
          type: 'category',
          data: ['2010', '2020', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {},
        axisPointer: {
          type: 'shadow'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1520],
          type: 'line'
        }]
      });
    }

  },
  mounted () {
    this.init()
    this.init2()
    this.init3()
  }
}
</script>

<style lang="scss" scoped>

.chart {
  width: 700px;
  height: 500px;
}

.chart2 {
  margin-top: 20px;
  width: 700px;
  height: 500px;
}

.chart3 {
  margin-top: 20px;
  width: 700px;
  height: 500px;
}
</style>
